<template>
  <div class="file-content el-row--flex o-hid h-100">
    <div class="header el-row--flex flex-between p-2">
      <div class="left">
        <el-input
          size="small"
          v-model="query.keyword"
          placeholder="请输入小说名称"
        >
          <template slot="append">
            <el-button
              size="mini"
              @click="search">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="right">
        <el-button
          type="primary"
          size="small"
          @click="addFile"
        >小说上传
        </el-button>
<!--        <el-button-->
<!--          size="small"-->
<!--          @click="delList"-->
<!--        >批量删除-->
<!--        </el-button>-->
      </div>
    </div>
    <div class="content flex-1 p-l-2 p-r-2">
      <el-table
        height="100%"
        :data="tableData"
        border
        @selection-change="selectChange"
      >
<!--        表格多选列-->
<!--        <el-table-column-->
<!--          type="selection"-->
<!--        />-->
        <el-table-column
          prop="BookID"
          width="80px"
          label="小说编号"
        />
        <el-table-column
          prop="BookName"
          label="小说名称"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="showFile(scope.row)">{{ scope.row.BookName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="BookID"
          label="作者"
        >
          <template slot-scope="scope">
            {{ scope.row.xs_Author.AuthorName }}
          </template>
        </el-table-column>
        <el-table-column
          label="小说类型"
          width="80px"
        >
          <template slot-scope="scope">
            {{ scope.row.xs_Type.TypeName }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="80px"
        >
          <template slot-scope="scope">
            {{ scope.row.xs_Status.StatusName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="Conetnt"
          label="文件地址"
        />
        <el-table-column
          label="操作"
          width="120px"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    查看文件详情的抽屉-->
    <el-drawer
      class="file-drawer"
      size="500px"
      :visible.sync="drawerVisible"
      :title="details.BookName"
    >
      <table class="m-2 user-table">
        <tr>
          <td class="text-left" style="width: 100px">小说图片：</td>
          <td class="m-r">
            <el-image class="cover" :src="'http://localhost:8001'+details.BookImg"/>
          </td>
        </tr>
        <tr>
          <td class="text-left">小说名称：</td>
          <td>{{ details.BookName }}</td>
        </tr>
        <tr>
          <td class="text-left">小说类型：</td>
          <td>{{ details.xs_Type.TypeName }}</td>
        </tr>
        <tr>
          <td class="text-left">小说状态：</td>
          <td>{{ details.xs_Status.StatusName }}</td>
        </tr>
        <tr>
          <td class="text-left">小说作者：</td>
          <td>{{ details.xs_Author.AuthorName }}</td>
        </tr>
        <tr>
          <td class="text-left">小说状态：</td>
          <td>{{ details.xs_Status.StatusName }}</td>
        </tr>
        <tr>
          <td class="text-left">简介：</td>
          <td>
            <p style="line-height: 1.5;">{{ details.Synopsis }}</p>
          </td>
        </tr>
        <tr>
          <td class="text-left">发布日期：</td>
          <td>{{ details.StartTime }}</td>
        </tr>
        <tr>
          <td class="text-left">更新日期：</td>
          <td>{{ details.UpdateTime }}</td>
        </tr>
      </table>
    </el-drawer>
    <book-upload-dialog
      ref="bookDialog"
      :option-type="optionType"
      :book-id="bookId"
      @success="upLoadSuccess"
    />
  </div>
</template>

<script>
import BookUploadDialog from "@/components/dialog/BookUploadDialog";

export default {
  name: "file",
  components: {BookUploadDialog},
  layout: 'base',
  data() {
    return {
      tableData: [],
      query: {
        keyword: ''
      },
      selectFiles: [],
      detailsVisible: false, //控制详情抽屉的弹出状态
      details: {
        xs_Type: {},
        xs_Status: {},
        xs_Author: {}
      },
      uploadVisible: false,
      load: false,
      drawerVisible: false,
      optionType: 'add',
      bookId: 0
    }
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.$axios.$get('http://localhost:8001/files/searchBook?keywork=' + this.query.keyword)
        .then(res => {
          this.tableData = res
        })
        .catch(error => {
          this.$message.error('查询失败，请联系管理员！')
          console.log(error)
        })
    },
    /**
     * 小说上传
     */
    addFile() {
      this.optionType = 'add'
      this.bookId = 0
      this.$refs.bookDialog.openDialog()
    },
    upLoadSuccess() {
      this.search()//调用搜索的方法刷新列表数据
    },
    /**
     * 批量删除
     */
    delList() {
      if (this.selectFiles.length <= 0) {
        this.$message.warning('请选择要删除的外键！')
      } else {
        let fileIds = this.selectFiles.map(u => {
          return u.BookID
        })
        this.$axios.$get('http://localhost:8001/files/deleteBook?bookIds=' + fileIds)
          .then(res => {
            if (res.state) {
              this.$message.success(res.message)
              this.search()
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(error => {
            this.$message.error('小说删除失败')
            console.log(error)
          })
      }
    },
    /**
     * 表格多选监听
     * @param val
     */
    selectChange(val) {
      this.selectFiles = val
    },
    /**
     * 显示文件详情
     * @param row
     */
    showFile(row) {
      this.details = row
      this.drawerVisible = true
    },
    /**
     * 修改文件信息
     * @param row
     */
    edit(row) {
      this.optionType = 'edit'
      this.bookId = row.BookID
      this.$refs.bookDialog.openDialog()
    },
    /**
     * 删除文件信息
     * @param row
     */
    del(row) {
      this.$axios.$get('http://localhost:8001/files/deleteBook?bookIds=' + row.BookID)
        .then(res => {
          if (res.state) {
            this.$message.success(res.message)
            this.search()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(error => {
          this.$message.error('删除失败')
          console.log(error)
        })
    }
  },
  created() {
    this.$store.dispatch('book/initStore')
    //初始化表格数据
    this.$axios.$get('http://localhost:8001/files/getAllBook')
      .then(res => {
        this.tableData = res
      })
      .catch(error => {
        this.$message.error("文件列表获取失败！")
        console.log(error)
      })
      .finally(() => {
        this.load = true
      })
  }
}
</script>

<style lang="less">
.file-content {
  flex-direction: column;
  .content{
    height: 1px;
  }
  .file-drawer {
    .cover{
      width:60px !important;
      height: 60px !important;
    }
    tr {
      line-height: 60px;
    }
    .el-drawer__body{
      height: 1px;
      overflow: auto;
    }
  }
}
</style>
